<template>
  <div style = " height: 100%;padding: 10px 0 0">
    <el-tabs v-model = "activeName"
             @tab-change = "changeActiveName"
    >
      <!--个性推荐-->
      <el-tab-pane label = "个性推荐" name = "first">
        <discovered-tag-container>
          <music-recommend></music-recommend>
        </discovered-tag-container>
      </el-tab-pane>
      <!--歌单-->
      <el-tab-pane label = "歌单" name = "second">
        <discovered-tag-container>
          <song-list @showBoutiqueList = "showBoutiqueList"
                     v-show = "isTotalList"></song-list>
          <song-list-boutique-list v-show = "!isTotalList"></song-list-boutique-list>
        </discovered-tag-container>
      </el-tab-pane>
      <!--排行榜-->
      <el-tab-pane label = "排行榜" name = "third">
        <discovered-tag-container>
          <rank-list></rank-list>
        </discovered-tag-container>
      </el-tab-pane>
      <!--歌手-->
      <el-tab-pane label = "歌手" name = "fourth">
        <discovered-tag-container>
          <singer-list></singer-list>
        </discovered-tag-container>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script setup>
import DiscoveredTagContainer from "@/views/DiscoveredMusic/DiscoveredTagContainer";
import MusicRecommend from "./MusicRecommend";
import SongList from "./SongList";
import RankList from "./RankList";
import SingerList from "./SingerList";
import SongListBoutiqueList from "./SongListBoutiqueList";
import {ref} from "vue";


// tabs
const activeName = ref('first')
let isTotalList = ref(true)

function changeActiveName() {
  isTotalList.value = true
}

function showBoutiqueList() {
  isTotalList.value = false
}
</script>

<style lang = "less" scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

:deep(.el-tabs) {
  height: 100%;

  .el-tabs__nav-scroll {
    padding: 0 30px;
  }

  .el-tabs__content {
    height: 100%;
  }

  .el-tabs__nav-wrap::after {
    height: 0;
  }

  .el-tabs__item.is-active {
    color: black;
    font-size: 15px;
    font-weight: bolder;
  }

  .el-tabs__item:hover {
    color: black;
    font-weight: bold;
  }

  .el-tabs__active-bar {
    background-color: var(--slider-button-color);
  }
}

</style>

